<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: maps/OccupancyGrid.js</title>
    
    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">
    
    <h1 class="page-title">Source: maps/OccupancyGrid.js</h1>
    
    


    
    <section>
        <article>
            <pre class="prettyprint source"><code>/**
 * @author Russell Toris - rctoris@wpi.edu
 */

/**
 * An OccupancyGrid can convert a ROS occupancy grid message into a createjs Bitmap object.
 *
 * @constructor
 * @param options - object with following keys:
 *   * message - the occupancy grid message
 */
ROS2D.OccupancyGrid = function(options) {
  options = options || {};
  var message = options.message;

  // internal drawing canvas
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');

  // save the metadata we need
  this.pose = new ROSLIB.Pose({
    position : message.info.origin.position,
    orientation : message.info.origin.orientation
  });

  // set the size
  this.width = message.info.width;
  this.height = message.info.height;
  canvas.width = this.width;
  canvas.height = this.height;

  var imageData = context.createImageData(this.width, this.height);
  for ( var row = 0; row &lt; this.height; row++) {
    for ( var col = 0; col &lt; this.width; col++) {
      // determine the index into the map data
      var mapI = col + ((this.height - row - 1) * this.width);
      // determine the value
      var data = message.data[mapI];
      var val;
      if (data === 100) {
        val = 0;
      } else if (data === 0) {
        val = 255;
      } else {
        val = 127;
      }

      // determine the index into the image data array
      var i = (col + (row * this.width)) * 4;
      // r
      imageData.data[i] = val;
      // g
      imageData.data[++i] = val;
      // b
      imageData.data[++i] = val;
      // a
      imageData.data[++i] = 255;
    }
  }
  context.putImageData(imageData, 0, 0);

  // create the bitmap
  createjs.Bitmap.call(this, canvas);
  // change Y direction
  this.y = -this.height * message.info.resolution;
  
  // scale the image
  this.scaleX = message.info.resolution;
  this.scaleY = message.info.resolution;
  this.width *= this.scaleX;
  this.height *= this.scaleY;

  // set the pose
  this.x += this.pose.position.x;
  this.y -= this.pose.position.y;
};
ROS2D.OccupancyGrid.prototype.__proto__ = createjs.Bitmap.prototype;
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="ROS2D.ArrowShape.html">ArrowShape</a></li><li><a href="ROS2D.Grid.html">Grid</a></li><li><a href="ROS2D.NavigationArrow.html">NavigationArrow</a></li><li><a href="ROS2D.OccupancyGrid.html">OccupancyGrid</a></li><li><a href="ROS2D.OccupancyGridClient.html">OccupancyGridClient</a></li><li><a href="ROS2D.OccupancyGridSrvClient.html">OccupancyGridSrvClient</a></li><li><a href="ROS2D.PanView.html">PanView</a></li><li><a href="ROS2D.PathShape.html">PathShape</a></li><li><a href="ROS2D.PolygonMarker.html">PolygonMarker</a></li><li><a href="ROS2D.TraceShape.html">TraceShape</a></li><li><a href="ROS2D.Viewer.html">Viewer</a></li><li><a href="ROS2D.ZoomView.html">ZoomView</a></li></ul><h3>Global</h3><ul><li><a href="global.html#ROS2D">ROS2D</a></li></ul>
</nav>

<br clear="both">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.0-dev</a> on Mon Jul 28 2014 11:21:38 GMT-0400 (EDT)
</footer>

<script> prettyPrint(); </script>
</body>
</html>
